import Vue from 'vue'

// 相当于是 vue 的一个插件，TODO 开发一个插件 理解 Vue.use到底干了什么
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import News from '../views/News.vue'

// 注册路由 this.$router(push back go) this.$route(query params)
// 插件注册

// https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6

Vue.use(VueRouter)

/*
* Vue.prototype.$router = function(){}
* Vue.prototype.$route = {query: {}, params: {}}
*
* */

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/news',
        name: 'news',
        component: News
    },
    {
        path: '/about',
        name: 'About',
        /*按需引入组件*/
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
]

/*
* https://blog.csdn.net/wenfu814/article/details/108266620
* router-link中要注意区分active-class（模糊匹配）和exact-active-class（精确匹配）
模糊匹配： linkActiveClass: 'active',
精确匹配： linkExactActiveClass: 'active'

* */
const router = new VueRouter({
    routes,
    // linkActiveClass: 'active',
    linkExactActiveClass: 'active'
})

export default router
